<template>
 <div class="notification">
   <Alert>勾选我们应该通知你的内容</Alert>
   <div class="notification-content">
      <div class="type">
        <Row gutter="16">
          <Col span="2">
            <span class="label">账户</span>
          </Col>
          <Col span="22">
            <div>
              <CheckboxGroup v-model="social">
                <Checkbox class="checkbox" label="twitter">
                  <Icon type="logo-twitter"></Icon>
                  <span>Twitter</span>
                </Checkbox>
                <Checkbox class="checkbox" label="facebook">
                  <Icon type="logo-facebook"></Icon>
                  <span>Facebook</span>
                </Checkbox>
                <Checkbox class="checkbox" label="github">
                  <Icon type="logo-github"></Icon>
                  <span>Github</span>
                </Checkbox>
                <Checkbox class="checkbox" label="snapchat">
                  <Icon type="logo-snapchat"></Icon>
                  <span>Snapchat</span>
                </Checkbox>
              </CheckboxGroup>
            </div>
          </Col>
        </Row>
      </div>
     <div class="type">
       <Row gutter="16">
         <Col span="2">
           <span class="label">财务</span>
         </Col>
         <Col span="22">
           <div>
             <CheckboxGroup v-model="social">
               <Checkbox class="checkbox" label="twitter">
                 <Icon type="logo-twitter"></Icon>
                 <span>Twitter</span>
               </Checkbox>
               <Checkbox class="checkbox" label="facebook">
                 <Icon type="logo-facebook"></Icon>
                 <span>Facebook</span>
               </Checkbox>
               <Checkbox class="checkbox" label="github">
                 <Icon type="logo-github"></Icon>
                 <span>Github</span>
               </Checkbox>
               <Checkbox class="checkbox" label="snapchat">
                 <Icon type="logo-snapchat"></Icon>
                 <span>Snapchat</span>
               </Checkbox>
             </CheckboxGroup>
           </div>
         </Col>
       </Row>
     </div>
     <div class="type">
       <Row gutter="16">
         <Col span="2">
           <span class="label">包裹</span>
         </Col>
         <Col span="22">
           <div>
             <CheckboxGroup v-model="social">
               <Checkbox class="checkbox" label="twitter">
                 <Icon type="logo-twitter"></Icon>
                 <span>Twitter</span>
               </Checkbox>
               <Checkbox class="checkbox" label="facebook">
                 <Icon type="logo-facebook"></Icon>
                 <span>Facebook</span>
               </Checkbox>
               <Checkbox class="checkbox" label="github">
                 <Icon type="logo-github"></Icon>
                 <span>Github</span>
               </Checkbox>
               <Checkbox class="checkbox" label="snapchat">
                 <Icon type="logo-snapchat"></Icon>
                 <span>Snapchat</span>
               </Checkbox>
             </CheckboxGroup>
           </div>
         </Col>
       </Row>
     </div>
     <div class="type">
       <Row gutter="16">
         <Col span="2">
           <span class="label">订单</span>
         </Col>
         <Col span="22">
           <div>
             <CheckboxGroup v-model="social">
               <Checkbox class="checkbox" label="twitter">
                 <Icon type="logo-twitter"></Icon>
                 <span>Twitter</span>
               </Checkbox>
               <Checkbox class="checkbox" label="facebook">
                 <Icon type="logo-facebook"></Icon>
                 <span>Facebook</span>
               </Checkbox>
               <Checkbox class="checkbox" label="github">
                 <Icon type="logo-github"></Icon>
                 <span>Github</span>
               </Checkbox>
               <Checkbox class="checkbox" label="snapchat">
                 <Icon type="logo-snapchat"></Icon>
                 <span>Snapchat</span>
               </Checkbox>
               <Checkbox class="checkbox" label="twitter">
                 <Icon type="logo-twitter"></Icon>
                 <span>Twitter</span>
               </Checkbox>
               <Checkbox class="checkbox" label="facebook">
                 <Icon type="logo-facebook"></Icon>
                 <span>Facebook</span>
               </Checkbox>
               <Checkbox class="checkbox" label="github">
                 <Icon type="logo-github"></Icon>
                 <span>Github</span>
               </Checkbox>
               <Checkbox class="checkbox" label="snapchat">
                 <Icon type="logo-snapchat"></Icon>
                 <span>Snapchat</span>
               </Checkbox>
               <Checkbox class="checkbox" label="twitter">
                 <Icon type="logo-twitter"></Icon>
                 <span>Twitter</span>
               </Checkbox>
               <Checkbox class="checkbox" label="facebook">
                 <Icon type="logo-facebook"></Icon>
                 <span>Facebook</span>
               </Checkbox>
               <Checkbox class="checkbox" label="github">
                 <Icon type="logo-github"></Icon>
                 <span>Github</span>
               </Checkbox>
               <Checkbox class="checkbox" label="snapchat">
                 <Icon type="logo-snapchat"></Icon>
                 <span>Snapchat</span>
               </Checkbox>
             </CheckboxGroup>
           </div>
         </Col>
       </Row>
     </div>
   </div>
 </div>
</template>

<script>
export default {
  name: "notification",
  data() {
    return {
      social: []
    }
  }
}
</script>

<style scoped lang="less">
.notification {
  .type {
    padding-top: 24px;
    border-bottom: 1px solid @t-table-border-color;
    .checkbox {

      margin-right: 24px;
      margin-bottom: 24px;
    }
  }
  .label {
    color: @t-title-color;
    font-size: 14px;
  }
}
</style>